<template>
	<a ca="P套餐卡_购买套餐卡列表${{item.mdseName}}$立即购买" v-on:click="gotoCardBuy(item.mdseCode,item.cityId,item.mdseName)" track-by="$index" v-for="item in itemData" :style="{backgroundImage:'url('+item.androidPrimaryImg+')'}" class="card-item page-infinite-listitem" v-bind:class="{'card-bg-blue': Boolean(item.androidPrimaryImg)}">

	<!-- <a ca="P套餐卡_购买套餐卡列表${{item.mdseName}}$立即购买" v-on:click="gotoCardBuy(item.mdseCode,item.cityId,item.mdseName)" track-by="$index" v-for="item in itemData" class="card-item page-infinite-listitem card-bg-blue"> -->
		<h3 class="card-title">{{item.mdseName}}</h3>
		<p class="card-price"><span class="price-sign">&yen;</span><span class="price-val">{{item.cashPrice}}</span></p>
		<p class="card-text">{{{item.mdseSellingPoint | toenter}}}</p>
		<div class="item-buy">
			<span class="card-explain">仅限{{item.regionName}}门店使用</span>
			<div class="buy-btn clearfix"><i class="sf-card-btn"></i><span class="btn-text">立即购买</span></div>
		</div>
<!-- 		<div class="item-head">
	<h3 class="card-title">{{item.mdseName}}</h3>
	<span class="card-explain">仅限{{defaultcityname}}门店使用</span>
</div> -->
	</a>
	<div class="pull-down-text" v-bind:class="{'perch': perchType}">{{pullDownTypeText}}</div>
</template>

<script>
	//共用方法
	import common from '../../utils/common.js';
	import '../../assets/css/infinite-scroll.css';
	
	export default{
		data () {
			return {
				catalogCode:'',				//目录Code来自card-list cardTypeAdata();
				defaultcityname:'',			//默认城市名
				itemData:'', 				//卡片数据
				pages:1, 	 				//请求页数
				pageSize:'',
				allLoaded:false,
				topStatus:'pulldown',
				cssStyle: true,
				cityId:'',
				pullDownTypeText:'下载加载更多',
				perchType:true,
				pullDownStop:true,
				loadFlag:true,
				backGroundType:false
			}
		},
		methods: {
			gotoCardBuy:function(mdseCode,cityId,mdseName){
				sessionStorage.setItem('thisMdseName',mdseName);
				this.$route.router.go({name: 'cardbuy',params:{'spuCode': mdseCode,'cityId':cityId,'cityName':this.defaultcityname}});
			},
			pullDownLoadMore:function(){

				var _this = this;

				document.addEventListener('touchmove',function(event){
					if(_this.loadFlag){

						var scrollTopHeight,docHeight,windowHeight;

							scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop;
							docHeight = document.body.scrollHeight; //滚动条全高
							windowHeight = document.documentElement.clientHeight; //正文全高

							if((docHeight - windowHeight) - scrollTopHeight <= 0){
								//判断是否是加载更多数据而触发的下拉加载更多
								_this.loadFlag = false;
								_this.loadBottom();
							}
					}
				}); 
				
			},
			//下拉加载
			loadBottom:function(){

				var currentItems,
					_this = this;


				_this.catalogCode = _this.catalogCode || 1002764;

				_this.cityId = localStorage.cardBuyCityId;
				
				if(_this.itemData){
					currentItems = _this.itemData;

					_this.topStatus = 'loading';
					_this.pullDownTypeText = "加载中...";
					_this.perchType = false;
					_this.pages++;


						_this.cssStyle = true;   //下拉加载回滚样式
						//列表数据渲染
						this.$http.post(common.isdev()+'/cardList/queryCardList.htm', {
							
							currentPage:_this.pages, //当前页数

							catalogCode:_this.catalogCode,//目录code

							cityId:_this.cityId

						}).then(function ( d ) {
							
							var cardData = typeof d.data === 'object' ? d.data : JSON.parse(d.data),
								cardListSkuCode = [],
								totalItem = cardData.obj.pagination.totalRows, //获取总数量
								totalPage = cardData.obj.pagination.pageCount; //获取总页面

							if(cardData.obj.r === null){
								_this.topStatus = 'null';
								_this.pullDownTypeText = "没有更多套餐卡了"
								_this.perchType = true;
								_this.loadFlag = true;
								return false;
							}
							for(var i= 0; i < cardData.obj.r.length; i++){

								cardListSkuCode.push({"skuCode":cardData.obj.r[i].skuCode});

							}

							cardListSkuCode = JSON.stringify(cardListSkuCode);//请求价格参数
							
							this.$http.post(common.isdev() + '/pricePrmtHandle/queryCxjMdsePricePrmts.htm', {//请求价格

								skus:cardListSkuCode

							}).then(function(d){

								var skuData = typeof d.data === 'object' ? d.data.obj : JSON.parse(d.data).obj;

								for(var i = 0; i < cardData.obj.r.length; i++){

									for(var j = 0; j < skuData.length; j++){
										//回填价格
										if(cardData.obj.r[i].skuCode == skuData[j].skuCode){

											cardData.obj.r[i].cashPrice = skuData[j].cashPrice;

										}
										
									}//回填结束
								}
								if(currentItems.length < totalItem){ //加载完成后执行判断当前卡片数量是否小于全部卡片数量
									
									for(var o = 0; o < cardData.obj.r.length; o++){ //向内添加新的卡片

										currentItems.push(cardData.obj.r[o]);

									}

									_this.topStatus = 'pulldown';
									_this.pullDownTypeText = "下拉加载更多";
									_this.perchType = true;
									_this.$set("itemData",currentItems);

								}else if(currentItems.length-totalItem == 0){//当页面已经没有数据执行
									_this.topStatus = 'null';
									_this.pullDownTypeText = "没有更多套餐卡了";
									_this.perchType = true;
									
								}
								_this.loadFlag = true;
							}, function(err) {

								common.Toast(err);
								
							});
						}, function ( error ) {

							common.Toast('error');

						});
				}
			}
		},
		events: {
			cardTypeAdata: function (defaultcityname, data, pageSize, catalogCode, cityId) {

				//var dateFormate='',date;
				localStorage.defaultcityname = this.defaultcityname = defaultcityname;
				if(pageSize < 5){
					this.pullDownTypeText = "没有更多套餐卡了";
				}else{
					this.pullDownTypeText = "下拉加载更多";
				}
				
				this.cityId = cityId;
				this.$set("itemData",data);
				this.loadFlag = true;
				this.itemData = data;
				this.pageSize = pageSize;
				this.catalogCode = catalogCode;
				this.pages = 1;
				this.topStatus = 'pulldown';
				this.pullDownLoadMore();
				//下拉加载更多开启
				sessionStorage.pullDownStopType = true;
				//console.log('再次加载中'+this.loadFlag);
				this.$nextTick(function () {
			        (new Analytics).scan();
			    });
			}
		}
	}
</script>

<style lang="scss" scoped>

@import '../../assets/css/_functions.scss';
@import '../../assets/css/_variables.scss';
	.card-item{
		height:rem(250);
		border-radius: 10px;
		padding:rem(15) rem(0) 0 rem(25);
		position:relative;
		overflow: hidden;
		margin:0 auto rem(15) auto;
		color:#fff;
		display:block;
		background-repeat:no-repeat;
		background-size:100% 100%;
		box-shadow:0px rem(5) rem(12) 0px rgba(141,141,141,0.49);
		.card-title{
			font-size:rem(18);
			width: rem(290);
			height: rem(21);
			margin-bottom:rem(15);
			line-height:rem(21);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: left;
			color:#98A1BC;
		}
		.card-price{
			text-align:left;
			font-size:rem(48);
			color:#424173;
			.price-sign{
				margin-top:rem(-5);
				margin-right:rem(5);
				font-size:rem(27);
				display:inline-block;
				vertical-align: top;
			}
			.price-val{
				display:inline-block;
			}
		}
		.card-text{
			width:rem(280);
			height:rem(87);
			line-height:rem(22);
			text-align:left;
			font-size:rem(14);
			overflow:hidden;
			margin-top:rem(30);
		}
		.item-head{
			border-bottom:1px solid #fff;
			overflow: hidden;
			line-height: rem(18);
			padding-bottom:rem(6);
			.card-title{
				font-size:rem(18);
				float:left;
				width: rem(180);
				height: rem(21);
				line-height:rem(21);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				text-align: left;
			}
		}
		.item-content{
			padding:rem(12) 0;
			.card-info{
				height: rem(75);
				line-height: rem(20);
				font-size:rem(11);
				overflow: hidden;
				text-align:left;
			}
		}
		.item-buy{
			.price{
				float:left;
				line-height:rem(25);
				font-size:rem(22);
				margin-top: rem(12);
			}
			.currency{
				font-size:rem(13);
			}
			.sf-card-btn{
				display:inline-block;
				vertical-align:middle;
				margin-left:rem(-25);
				margin-top:-2px;
				margin-right:rem(10);
			}
			.buy-btn{
				position:absolute;
				right:0;
				bottom:rem(20);
				width:rem(147);
				height:rem(44);
				line-height: rem(44);
				font-size:rem(18);
				border-top-left-radius:25px;
				border-bottom-left-radius:25px;
				background-color:#ffe800;
				color:#ff4605;
				margin-top: rem(1);
				box-shadow:-1px 4px 0px 1px rgba(248,151,13,0.60);
			}
			.btn-text{
				vertical-align: middle;
			}
			.card-explain{
				position:absolute;
				bottom:rem(15);
				left:rem(25);
				width:rem(120);
				font-size:rem(11);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-top: rem(1);
				text-align:left;
			}
		}
	}
	.card-bg-blue{
		background-color:#22b2ed;
		line-height: normal;
	}
	.mint-loadmore{
		overflow: inherit;
	}
	.cssStyle {
		//transform: translate3d(0px, 90px, 0px);
	}

	.pull-down-text{
		width:100%;
		height:rem(30);
		line-height: rem(30);
		font-size:rem(12);
		margin-bottom:rem(20);
		text-align: center;
		
	}
	.perch{
		margin-bottom:rem(50);
	}
</style>